<gm:page title="Tasks Gadget" authenticate="true">

  <div id="notasks">
    <gm:list id="projList" data="${user}/projects" template="projForm">
      <gm:handleEvent event="select" execute="onSelect(event.object);"/>
    </gm:list>
  </div>
  <div id="tasks" style="display: none; height: 100%; overflow: auto;">
    <gm:list id="taskList" data="${projList}/tasks" template="taskForm">
      <gm:handleEvent src="projList"/>
    </gm:list>
  </div>
 
  <gm:template id="projForm">
    <div class="gm-header">Pick a Project:</div>
    <div style="height: 162px; overflow: auto;">
      <table width="100%">    
        <tbody repeat="true">
          <tr>
            <td><gm:text style="width:140px" ref="atom:title" class="gm-link"/></td>
            <td width="45"><gm:editButtons/></td>
          </tr> 
         </tbody>
       </table>
    </div>
    <div class="gm-toolbar">
      <gm:create label="New Project"/>
    </div>
  </gm:template>

  <gm:template id="taskForm">
    <table width="100%" class="gm-compact">
      <thead>
        <tr class="gm-header">
          <td width="50" colspan="2"><gm:header>Done</gm:header></td>
          <td>Task</td>
        </tr>
      </thead>
    </table>
    <div style="height: 160px; overflow: auto;">
    <table width="100%" class="gm-compact">
      <tbody repeat="true">
        <tr>
          <td width="20" rowspan="2" valign="top"><gm:toggle/></td>
          <td width="30" rowspan="2" valign="top"><gm:checkbox ref="gd:status/@value" value=""/></td>
          <td style="overflow: hidden;"><gm:text ref="atom:title"/></td>
          <td width="45"><gm:editButtons/></td>
        </tr>
        <tr class="gm-toggled" style="overflow: hidden;">
          <td colspan="2"><gm:textarea ref="atom:content"/></td>
        </tr>
      </tbody>
    </table>
    </div>
    <div class="gm-toolbar">
      <gm:create label="New Task"/>
      <input type="button" value="Projects" onclick="goBack();" id="backButton"/>
    </div>
  </gm:template>
  
  <script>
    function goBack() {
      if (!google.mashups.getObjectById('taskList').isEditing()) {
        google.mashups.getObjectById('projList').selectEntry(null);
      }
    } 
  
    function onSelect(o) {
      var taskDiv = document.getElementById('tasks');
      var noDiv = document.getElementById('notasks');
      if (!o || google.mashups.getObjectById('projList').isEditing()) {
        taskDiv.style['display'] = 'none';
        noDiv.style['display'] = '';
      } else {
        taskDiv.style['display'] = '';
        noDiv.style['display'] = 'none';
      }
    }
  </script>
</gm:page>

